<template>
  <div style="height: 100%; display: flex; flex-direction: column;">
    <TableHeaderWidget :header="'领域信息'"/>
    <el-tabs
        class="group-tabs"
        v-model="active"
        type="card"
        :stretch="false"
        tab-position="top"
        @tab-click="tabClick"
    >
      <el-tab-pane class="group-tab-pane" label="基本信息" name="brief">
        <RealmBaseInfo ref="refBaseInfo"/>
      </el-tab-pane>
      <el-tab-pane class="group-tab-pane" label="领域属性" name="attr">
        <AttributeList
            :ref="'attr'"
            :entry="entry"/>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts" name="realmInfo">
import {useStore} from "@/stores";
import {currentNames, SERVERS, TYPES} from '@/stores/conf'
import RealmBaseInfo from "@/widget/info/RealmBaseInfo.vue";
import AttributeList from "@/widget/list/AttributeList.vue";

import '@/styles/tabs.css'
import {useListTabs} from "@/utils/UseListTabs";
import {ref} from "vue";
import TableHeaderWidget from "@/widget/TableHeaderWidget.vue";
import {toRaw, watch, onMounted} from "vue";

const store = useStore();
const attr = ref();
const refBaseInfo = ref();
const {active, tabClick, handleCurrent, handleSwitch} = useListTabs('brief');

const refresh = () => {
  attr.value?.refresh();
  refBaseInfo.value?.refresh();
}

watch(
    () => store.realms,
    async (newVal: any, oldVal: any) => {
      const newRaw = toRaw(newVal);
      const oldRaw = toRaw(oldVal);

      if (oldRaw && newRaw.id !== oldRaw.id) {
        refresh();
      }
    }, {immediate: true}
);

onMounted(() => {
  attr.value?.refresh();
})

defineExpose({
  handleCurrent,
  handleSwitch,
})

const entry = ref({
  name: currentNames.REALM,
  type: TYPES.REALM,
  server: SERVERS.REALM
});

</script>

<style scoped>

.group-tabs >>> .el-tabs__header {
  padding-left: 16px;
}

</style>
